<template>
  <div class="cost_detail">
    <head-top head-title="费用明细" go-back="true"></head-top>
    <div class="cost_main">
      <ul>
        <li class="cost_title"><span>项目</span><span>价格</span></li>
        <!--承接查验-->
        <li v-for="(under,uindex) in list" :key="uindex" v-if="page==='under'">
          <span>{{under.name}}</span>
          <span>{{under.money}}</span>
        </li>
        <!--评估查验-->
        <li v-for="(aitem,aindex) in list" :key="aindex" v-if="page==='assess'">
          <span>{{aitem.name}}</span>
          <span>{{aitem.money}}</span>
        </li>
      </ul>
      <p>总价格：<span>{{money}}</span>元</p>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  export default {
    name: 'costDetail',
    data() {
      return {
        page: '', // 判断是承接查验还是评估查验页面
        list: [], // 获取明细数组
        money: '' // 总价格
      }
    },
    created() {
      this.page = this.$route.query.page
      this.list = this.$route.query.data
      this.money = this.$route.query.money
      console.log(this.$route.query.data)
    },
    methods: {},
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
.cost_detail{
  padding-top: 40px;
  .cost_main{
    padding: 0 50px;
    ul{
      li{
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        span{
          font-size: 15px;
        }
      }
      .cost_title{
        span{
          font-size: 17px;
          color: #414141;
          font-weight: bolder;
        }
      }
    }
    p{
      font-size: 17px;
      padding: 20px 0;
      color: #414141;
      span{
        color: #FB7354;
      }
    }
  }
}
</style>
